<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全局组件</title>
</head>
<body>
<div id="app"></div>

<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">

  /* 注册公共的全局，省去很多的components:{xxx:Xxx} */
  Vue.component('my-btn',{
    template:`
      <button style="background-color:red;">漂亮的按钮</button>
    `
  });

  var MyHeader = {
    template:`
      <div>
        我是header组件
        <my-btn/>
      </div>

    `
  }
  var MyFooter = {
    template:`
      <div>
        我是footer组件
        <my-btn/>
      </div>

    `
  }
  var App = {
    components:{
      'my-header':MyHeader,
      'my-footer':MyFooter
    },
    template:`
        <div>
          <my-header/>
          <my-footer/>

          <hr/>

          App入口组件使用全局组件如下
          <my-btn/>
        </div>
      `,
    data:function (){
      return { xxx:'我是变量xxx的数据' }
    }
  }

  new Vue({
    el:'#app',
    components:{
      app:App,
    },
    template:'<app/>'

  });

</script>
</body>
</html>
